<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>注册</title>
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<script src="//unpkg.com/vue/dist/vue.js"></script>
		<script src="//unpkg.com/element-ui@2.12.0/lib/index.js"></script>
		<link rel="stylesheet" type="text/css" href="//unpkg.com/element-ui@2.12.0/lib/theme-chalk/index.css" />
		<style type="text/css">
			.botText {
				font-family: HiraginoSansGB;
				font-weight: normal;
				color: rgba(255, 255, 255, 1);
				opacity: 0.25;
				height: 1.5rem;
				line-height: 1.5rem;
			}

			.el-step__title {
				font-size: 12px;
				line-height: 38px;
			}

			a {
				text-decoration: none;

			}
		</style>
	</head>
	<body>
		<div style='width: 100%;' class='divCenter'>
			<div style='width: 56rem;height: 7.5rem;' class='leftAndRight'>

				<div class='divRow divColumnCenter'>
					<img src="img/logo_login.png">
					<h2 style='margin-left: 1.25rem;'>欢迎注册</h2>
				</div>
				<div class='divRow divColumnCenter'>
					<h4>已有账号?</h4>
					<a href="login.html">
						<h4 style='color: #0B9406;margin-left: 0.25rem;cursor: pointer;'>立即登录></h4>
					</a>
				</div>
			</div>
		</div>
		<div style="width: 100%;height: 3.75rem;background: #282633;" class="divCenter">
			<div style="width:56rem;height: 100%;color: white;" class="divRow divColumnCenter">
				<img src="img/head.png" style="width: 2rem;height: 2rem;margin-right: 0.625rem;" />
				<h2>会员注册</h2>
			</div>
		</div>
		<div style="width: 100%;" class="divCenter" id="register">
			<div style="width: 25rem;height: 31.25rem;background: white;margin-top: 3.75rem;" class="divColumn">
				<div style='width: 100%;margin-top: 0.625rem;' v-show="showProgress">
					<el-steps :active="active" finish-status="success">
						<el-step title="验证手机号"></el-step>
						<el-step title="账号信息"></el-step>
						<el-step title="注册成功"></el-step>
					</el-steps>
				</div>
				<!-- 手机号码验证 -->
				<div style="width: 100%;height: auto;margin-top: 2.5rem;" class="divColumn" v-show="showPhone">
					<div style="width: 100%;height: 2.625rem;border: 0.0625rem solid #F0F0F0;" class="divRow">
						<div style="width: 34%;height: 100%;font-weight: 600;" class="divCenter divRow">
							中国大陆(+86)
							<img src="img/arrow.png" style="width: 1.5rem;" />
						</div>
						<div style="width: 0.0625rem;height: 100%;background: #F0F0F0;">
						</div>
						<div style="width: 65%;height: 100%;">
							<input style="margin: 0rem;padding: 0rem 0.625rem;border-width: 0rem;background: none;height: 100%;width: 94%;font-weight: 600;"
							 type="tel" placeholder="建议使用常用手机号码" />
						</div>
					</div>
					<div class="divRow divColumnCenter" style="margin-top: 0.75rem;">
						<img src="img/jg_img.png" style="width: 1.25rem;height: 1.25rem;margin-right: 0.625rem;" />
						<h4 style="color: #FE9900;">请输入您的手机号码</h4>
					</div>

					<div style="width: 100%;height: 2.625rem;border: 0.0625rem solid #F0F0F0;letter-spacing: 0.75rem;font-weight: 600;margin-top: 1.25rem;cursor: pointer;"
					 class="divCenter">
						点击进行验证

					</div>
					<div style="width: 100%;height: 2.625rem;border: 0.0625rem solid #F0F0F0;letter-spacing: 0.75rem;font-weight: 600;margin-top: 1.875rem;cursor: pointer;background: #00AC4A;color: white;"
					 class="divCenter" @click="nextPhone()">
						下一步

					</div>
				</div>
				<!-- 填写账号信息 -->
				<div style="width: 100%;height: auto;margin-top: 2.5rem;display: none;" class="divColumn" v-show="showAccount">
					<div style="width: 100%;height: 2.625rem;border: 0.0625rem solid #F0F0F0;" class="divRow">
						<div style="width: 30%;height: 100%;font-weight: 600;letter-spacing: 0.75rem;" class="divCenter divRow">
							用户名
						</div>
						<div style="width: 0.0625rem;height: 100%;background: #F0F0F0;">
						</div>
						<div style="width: 69%;height: 100%;">
							<input style="margin: 0rem;padding: 0rem 0.625rem;border-width: 0rem;background: none;height: 100%;width: 94%;font-weight: 600;font-size:0.875rem"
							 type="tel" placeholder="请输入您的账号或登录名" />
						</div>
					</div>
					<div class="divRow divColumnCenter" style="margin-top: 0.625rem;">
						<img src="img/jg2_img.png" style="width: 1.25rem;height: 1.25rem;" />
						<span style="color: #999999;margin-left: 0.625rem;">支持中文、英文、数字、”_”、”—“的组合，4—20个字符</span>

					</div>
					<div style="width: 100%;height: 2.625rem;border: 0.0625rem solid #F0F0F0;margin-top: 1.25rem;" class="divRow">
						<div style="width: 30%;height: 100%;font-weight: 600;letter-spacing: 0.375rem;" class="divCenter divRow">
							设置密码
						</div>
						<div style="width: 0.0625rem;height: 100%;background: #F0F0F0;">
						</div>
						<div style="width: 69%;height: 100%;">
							<input style="margin: 0rem;padding: 0rem 0.625rem;border-width: 0rem;background: none;height: 100%;width: 94%;font-weight: 600;font-size:0.875rem"
							 type="password" placeholder="请输入您的密码" />
						</div>
					</div>
					<div class="divRow divColumnCenter" style="margin-top: 0.625rem;">
						<img src="img/jg2_img.png" style="width: 1.25rem;height: 1.25rem;" />
						<span style="color: #999999;margin-left: 0.625rem;">建议您使用两种或者两种以上的字符组合，6—20个字符</span>

					</div>

					<div style="width: 100%;height: 2.625rem;border: 0.0625rem solid #F0F0F0;margin-top: 1.25rem;" class="divRow">
						<div style="width: 30%;height: 100%;font-weight: 600;letter-spacing: 0.375rem;" class="divCenter divRow">
							确定密码
						</div>
						<div style="width: 0.0625rem;height: 100%;background: #F0F0F0;">
						</div>
						<div style="width: 69%;height: 100%;">
							<input style="margin: 0rem;padding: 0rem 0.625rem;border-width: 0rem;background: none;height: 100%;width: 94%;font-weight: 600;font-size:0.875rem"
							 type="password" placeholder="请输入您的密码" />
						</div>
					</div>
					<div class="divRow divColumnCenter" style="margin-top: 0.625rem;">
						<img src="img/jg2_img.png" style="width: 1.25rem;height: 1.25rem;" />
						<span style="color: #999999;margin-left: 0.625rem;">请再次输入密码</span>

					</div>

					<div style="width: 100%;height: 2.625rem;border: 0.0625rem solid #F0F0F0;letter-spacing: 0.75rem;font-weight: 600;margin-top: 1.875rem;cursor: pointer;background: #00AC4A;color: white;"
					 class="divCenter" @click="register()">
						立即注册

					</div>
				</div>
				<!-- 注册成功 -->
				<div style="width: 100%;height: 50%;display: none;" class="divCenter divColumn" v-show="showSuccess">
					<img src="img/success.png" />
					<h2 style="margin-top: 0.625rem;">恭喜您</h2>
					<h3 style="margin-top: 0.625rem;color: #999999;">您成功注册为村里村外用户，祝您购物愉快~</h3>
					<div style="width: 7.5rem;height: 3.75rem;color: white;background: #00AC4A;margin-top: 1.25rem;border-radius: 0.3125rem;font-size: 1rem;letter-spacing: 0.375rem;font-weight: 600;cursor: pointer;"
					 class="divCenter" @click="goShopping()">
						去登录
					</div>
				</div>
			</div>
		</div>
		<div style="width: 100%;" class="divCenter">
			<div style="width: 75rem;background: white;height: 7.5rem;" class="divRow divColumnCenter">
				<div style="width: 25%;" class="divRow divColumnCenter">
					<img src="img/home13.png" />
					<span style="color: #999999;margin-left: 0.625rem;font-size: 1rem;">品类齐全 轻松购物</span>
				</div>
				<div style="width: 25%;" class="divRow divColumnCenter">
					<img src="img/home14.png" />
					<span style="color: #999999;margin-left: 0.625rem;font-size: 1rem;">精选生鲜 严格质检</span>
				</div>
				<div style="width: 25%;" class="divRow divColumnCenter">
					<img src="img/home15.png" />
					<span style="color: #999999;margin-left: 0.625rem;font-size: 1rem;">天天低价 畅选无忧</span>
				</div>
				<div style="width: 25%;" class="divRow divColumnCenter">
					<img src="img/home16.png" />
					<span style="color: #999999;margin-left: 0.625rem;font-size: 1rem;">全方位 售后服务</span>
				</div>
			</div>
		</div>

		<!-- 底部介绍 -->
		<div style="width: 100%;15rem;background: #282633;height: 22.5rem;" class="divCenter">
			<div style="width: 75rem;height: 100%;" class="divColumn">
				<div style="width: 100%;height: 70%;" class="divRow">
					<div style="width: 60%;height: 100%;" class="divColumn">
						<div style="width: 100%;color: white;height: 3.25rem;" class="divRow divColumnCenter">
							<h3 style="width: 20%;;">公司介绍</h3>
							<h3 style="width: 20%;">购物指南</h3>
							<h3 style="width: 20%;">支付方式</h3>
							<h3 style="width: 20%;">售后服务</h3>
							<h3 style="width: 20%;">商家服务</h3>
						</div>
						<div style="height: 0.0625rem;background: #000000;width: 100%;"></div>
						<div style="width: 100%;margin-top: 0.875rem;" class="divRow">
							<div style="width: 20%;" class="divColumn">
								<span class="botText">关于村里村外</span>
								<span class="botText">企业荣誉</span>
								<span class="botText">战略合作</span>
								<span class="botText">媒体报道</span>
								<span class="botText">企业风采</span>
								<span class="botText">联系我们</span>
							</div>
							<div style="width: 20%;" class="divColumn">
								<span class="botText">免费注册</span>
								<span class="botText">购物流程</span>
								<span class="botText">发票制度</span>
								<span class="botText">配送说明</span>
								<span class="botText">联系客服</span>
							</div>
							<div style="width: 20%;" class="divColumn">
								<span class="botText">网上支付</span>
							</div>
							<div style="width: 20%;" class="divColumn">
								<span class="botText">验货与拒收政策</span>
								<span class="botText">退换货流程</span>
								<span class="botText">退款流程</span>
							</div>
							<div style="width: 20%;" class="divColumn">
								<span class="botText">招商范围</span>
								<span class="botText">商家资质要求</span>
								<span class="botText">入驻流程</span>
								<span class="botText">商家后台</span>
							</div>
						</div>

					</div>
					<div style="width: 40%;height: 100%;" class="divRow">
						<div style="margin: 1.25rem;">
							<img src="img/home17.png" />
						</div>
						<div style="margin:1.25rem 0rem;width: 60%;" class="divColumn">
							<span style="width: 60%;text-align: end;" class="botText">二十四小时咨询热线</span>
							<h1 style="color: white;">021-12454563</h1>
							<div class="divRow" style="margin-top: 0.625rem;">
								<div class="divColumn" style="width: 40%;" class="divColumn divCenter">
									<img src="img/home18.png" style="width: 100%;" />
									<span class="botText" style="text-align: center;">手机APP</span>
								</div>
								<div style="width: 10%;"></div>
								<div class="divColumn" style="width: 40%;" class="divColumn divCenter">
									<img src="img/home18.png" style="width: 100%;" />
									<span class="botText" style="text-align: center;">微信公众号</span>

								</div>
							</div>
						</div>
					</div>
				</div>
				<div style="width: 100%;height: 0.0625rem;background: black;"></div>
				<div style="width: 100%;margin-top: 1.25rem;" class="divColumn">
					<h2 style="color: white;">湖南村里村外电子商务有限公司</h2>
					<div class="divRow divColumnCenter" style="height: 2.625rem;">
						<span class="botText">湖南长沙市XXXXXXX栋XX单元</span>
						<span class="botText" style="margin-left: 2.5rem;">Tel:05456-46546545</span>
						<span class="botText" style="margin-left: 2.5rem;">E-mail:564564654@qq.com</span>

					</div>


				</div>

			</div>


		</div>
		<script>
			var register = new Vue({
				el: "#register",
				data: {
					active: 0,
					showProgress: true,
					showPhone: true,
					showAccount: false,
					showSuccess: false,
				},
				created: function() {

				},
				methods: {
					nextPhone: function() {
						register.active = 1;
						register.showAccount = true;
						register.showPhone = false;
					},
					register: function() {
						register.active = 2;
						var count = 2;
						const TIME_COUNT = 1;
						if (!this.timer) {
							this.count = TIME_COUNT;
							this.show = false;
							this.timer = setInterval(() => {
								if (this.count > 0 && this.count <= TIME_COUNT) {
									this.count--;
								} else {
									this.show = true;
									clearInterval(this.timer);
									this.timer = null;
									//跳转的页面写在此处
									register.active = 3;
									register.showAccount = false;
									register.showPhone = false;
									register.showProgress = false;
									register.showSuccess = true;
								}
							}, 1000)
						}
					},
					goShopping: function() {
						location.href = 'login.html'
					}
				}
			});
		</script>
	</body>
</html>
